<template>
    <div class="admin-header">
        <el-card class="card">
            <div class="card-header">
                <div class="card-header-left">
                    <el-icon>
                        <Search />
                    </el-icon>
                    <span>筛选搜索</span>
                </div>
                <div class="crad-header-right">
                    <el-button @click="reset">重置</el-button>
                    <el-button type="primary" @click="searchInfo">查询搜索</el-button>
                </div>
            </div>
            <el-form :model="search">
                <el-form-item label="账号/姓名">
                    <el-input v-model="search.keyword" placeholder="请输入账号/姓名" clearable></el-input>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <div class="admin-content">
        <el-card class="card-table">
            <el-table :data="tableData" border style="width: 100%" fit>
                <el-table-column prop="id" label="编号" />
                <el-table-column prop="username" label="账号" />
                <el-table-column prop="nickName" label="姓名" />
                <el-table-column prop="email" label="邮箱" show-overflow-tooltip />
                <el-table-column label="添加时间" show-overflow-tooltip>
                    <template v-slot:default="scope">
                        <span>{{ dayjs(scope.row.createTime).format('YYYY-MM-DD hh:MM:ss') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="最后登录" show-overflow-tooltip>
                    <template v-slot:default="scope">
                        <span v-if="scope.row.loginTime">{{ dayjs(scope.row.loginTime).format('YYYY-MM-DD hh:MM:ss')
                        }}</span>
                        <span v-else>暂无时间</span>
                    </template>
                </el-table-column>
                <el-table-column label="是否启用">
                    <template v-slot:default="scope">
                        <el-switch v-model="scope.row.status" :inactive-value="0" :active-value="1"
                            @change="changeStatus($event, scope.row)" />
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" text type="primary" @click="assignRole(scope.row)">分配角色</el-button>
                        <el-button size="small" text type="primary" @click.capture="editAdmin(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>


        </el-card>
        <!-- 分页 -->
        <el-pagination v-model:current-page="search.pageNum" v-model:page-size="search.pageSize" background
            layout="prev, pager, next,sizes, ->,jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </div>
    <Editadmin :visible="visible" @close="closeDialog" :form="rowdata" @refresh="refresh"></Editadmin>
    <AssignRoles :roleVisible="roleVisible" :roleList="roleList" :personRole="personRole" :userId="userId"
        @close="closeDialog" @refresh="refresh" @submit="submitRoles"></AssignRoles>
</template>
<script setup>
import { reactive, toRefs, getCurrentInstance } from 'vue';
import { dayjs } from 'element-plus'
import { USERLIST_GET, USERSTATUS_POST, USERROLE_GET, USERROLELIST_GET, USERROLE_UPDATE_POST } from '../../api/index'
import Editadmin from './components/EditAdmin.vue'
import AssignRoles from './components/AssignRoles.vue'
const { proxy } = getCurrentInstance()
const state = reactive({
    search: {
        keyword: '',
        pageNum: 1,
        pageSize: 15
    },
    total: 0,
    tableData: [],
    visible: false,
    roleVisible: false,
    rowdata: {},
    roleList: [],
    personRole: [],
    userId: 0
})
const { search, tableData, total, visible, rowdata, roleVisible, roleList, personRole, userId } = toRefs(state)
//获取指定用户角色
const getRole = async (id) => {
    let result = await proxy.$request({
        url: USERROLE_GET + `/${id}`
    })
    if (result.code == 200 && result.data) {
        personRole.value = result.data
    }
}
//获取角色列表
const getRoleList = async () => {
    let result = await proxy.$request({
        url: USERROLELIST_GET,
        method: 'get'
    })
    if (result.code == 200) {
        roleList.value = result.data
    }
}
//获取用户信息列表
const getUserInfoList = () => {
    proxy.$request({
        url: USERLIST_GET,
        method: 'get',
        params: {
            keyword: search.value.keyword,
            pageNum: search.value.pageNum,
            pageSize: search.value.pageSize
        }
    }).then((res) => {
        if (res.code === 200) {
            tableData.value = res.data.list
            total.value = res.data.total
        }
    })
}
//点击分配角色按钮
const assignRole = (row) => {
    getRole(row.id)
    userId.value=row.id
    roleVisible.value = true
}
//确定分配角色
const submitRoles = async (ids,userId) => {
    let result = await proxy.$request({
        url: USERROLE_UPDATE_POST,
        method: 'post',
        params: { 
            adminId :userId,
            roleIds :ids.join()
         }
    })
   if (result.code==200) {
       refresh()
   }
}
const editAdmin = (row) => {
    visible.value = true
    rowdata.value = row
}
const reset = () => {
    search.value.keyword = ''
}
const searchInfo = () => {
    getUserInfoList()
}
const handleSizeChange = (value) => {
    search.value.pageSize = value
    getUserInfoList()

}
const handleCurrentChange = (value) => {
    search.value.pageNum = value
    getUserInfoList()
}
const changeStatus = (val, row) => {
    proxy.$request({
        url: USERSTATUS_POST + `/${row.id}`,
        method: 'post',
        params: {
            status: val
        }
    }).then((res) => {
    })
}
const closeDialog = (val) => {
    if (val == 'editadmin') {
        visible.value = false
    } else {
        roleVisible.value = false
    }

}
const refresh = () => {
    // search.value.keyword=''
    getUserInfoList()
}
getUserInfoList()
getRoleList()
</script>
<style scoped lang="scss">
.card {
    margin: 15px;

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .card-header-left {
            display: flex;
            align-items: center;
        }
    }
}

.card-table {
    margin: 15px;
    height: 400px;
    overflow: auto;
}

:deep(.el-pagination) {
    margin: 15px
}

:deep(.el-form) {
    margin-top: 15px;
}

:deep(.el-input) {
    width: 200px;
}
</style>